<template>
  <div class="zj_main">

    <router-view></router-view>

    <div class="footer">
      <router-link to="/messages" tag="div"  active-class="select">
        <em></em>
        <i>消息</i>
     </router-link>
      <router-link to="/member" tag="div"  active-class="select">
        <em></em>
        <i>会员</i>
     </router-link>
     <router-link to="/homePage" tag="div"  active-class="select">
        <em></em>
        <i>首页</i>
     </router-link>
     <router-link to="/photo" tag="div"  active-class="select">
        <em></em>
        <i>晒图</i>
     </router-link>
     <router-link to="/mine" tag="div"  active-class="select">
        <em></em>
        <i>我的</i>
     </router-link>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.footer{
    position: absolute;
    bottom:0;
    width:100%;
    height: 0.8rem;
    border-top:0.01rem solid #9c9c9c;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background-color:#fff;
    display: box;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    color: #9c9c9c;
    div{
      box-flex: 1;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-flex: 1;
      &.select{
          color: #79af33;
      }
      &:nth-child(1) em{
          background-position: -1.71rem 0;
      }
      &:nth-child(2) em{
          background-position: -1.14rem;
      }
      &:nth-child(3) em{
          background-position: -3.99rem 0;
      }
      &:nth-child(4) em{
         background-position: 0 0;
      }
      &:nth-child(5) em{
          background-position: -2.28rem;
      }
      &:nth-child(1).select em{
          background-position: -4.56rem 0;
      }
      &:nth-child(2).select em{
         background-position: -5.13rem 0;
      }
      &:nth-child(3).select em{
          background-position: -2.85rem 0;
      }
      &:nth-child(4).select em{
          background-position: -3.42rem 0;
      }
      &:nth-child(5).select em{
          background-position: -0.57rem 0;
      }
      em{
          display: block;
          width: 0.57rem;
          height: 0.57rem;
          margin:0 auto;
          background:url(../../common/images/footer.png) no-repeat; 
          background-size: 5.7rem 0.57rem;
      }
      i{
          display: block;
          font-size: 0.1855rem;
          text-align: center;
          margin-top: -0.101rem; 
      }
    }
}
</style>
